vue3 + vite实现异步组件和路由懒加载 |
您所在的位置：网站首页 › vue3 setup 异步组件 › vue3 + vite实现异步组件和路由懒加载 |
vue3 + vite实现异步组件和路由懒加载
|
在 Vue2 中，异步组件和路由懒加载处理使用 import 就可以很轻松实现。但是在Vue 3.x 中异步组件的使用与 Vue 2.x 完全不同了。本文就详细讲讲vue3中异步组件和路由懒加载的实现。
现在，在 Vue 3 中，由于函数组件被定义为纯函数，异步组件定义需要通过将其包装在一个新的 defineAsyncComponent helper 中来显式定义。 二、Vue 2.x与Vue 3.x定义比较 2-1.异步组件/路由定义比较 2-1-1.在 Vue 2.x 中，声明一个异步组件只需这样： const asyncPage = () => import('./views/home.vue') 2-1-2.在 Vue 3.x 中，异步组件的导入需要使用辅助函数defineAsyncComponent来进行显式声明。如下： Async Components异步组件测试 import { defineAsyncComponent } from 'vue' const child = defineAsyncComponent(() => import('@/components/async-component-child.vue')) export default { name: 'async-components', components:{ 'child': child } }; 2-2.声明方式比较 2-2-1.Vue 2.x中异步组件的声明有更高级的声明方式。如下： const asyncPageWithOptions = { component: () => import('./views/home.vue'), delay: 200, timeout: 3000, error: ErrorComponent, loading: LoadingComponent }所以，下面的异步组件声明： const asyncPage = () => import('./views/home.vue')等价于： const asyncPageWithOptions = { component: () => import('./views/home.vue') } 2-2-2.Vue 3.x中也可以这样声明异步组件。只是其中的component需要改为loader。如下： const asyncPageWithOptions = defineAsyncComponent({ loader: () => import('./views/home.vue'), delay: 200, timeout: 3000, error: ErrorComponent, loading: LoadingComponent }) 2-3.异步组件加载函数返回比较 2-3-1.在Vue 2.x中接收resolve和reject： // 2.x version const oldAsyncComponent = (resolve, reject) => { /* ... */ } 2-3-2.在Vue 3.x中始终返回Promise： // 3.x version const asyncComponent = defineAsyncComponent( () => new Promise((resolve, reject) => { /* ... */ }) )Vue 3.x的异步组件加载函数将不再接收resolve和reject，而且必须始终返回Promise。也就是说，工厂函数接收 resolve 回调的方式定义异步组件在 Vue 3.x 不能使用了。 // 在 Vue 3.x 中不适用 export default { components: { asyncPage: resolve => require(['@/components/list.vue'], resolve) }, } 三、Vue3实践提示： 如果是用vite工具来构建项目，在本地开发使用import做路由懒加载，可以正常加载，但是会报警告；打包到生产环境会报错，页面不会正常展示，可以使用以下两种方法来实现。 3-1.路由懒加载实现 3-1-1.defineAsyncComponent方法 // router/index.js import { defineAsyncComponent } from 'vue' const _import = (path) => defineAsyncComponent(() => import(`../views/${path}.vue`)); const routes = [ { path: '/async-component', name: 'asyncComponent', component: _import('home'), } ]; 3-1-2.importa.glob方法 // 1.上面的方法相当于一次性加载了 views 目录下的所有.vue文件，返回一个对象 const modules = importa.glob('../views/*/*.vue'); const modules ={ "../views/about/index.vue": () => import("./src/views/about/index.vue") } // 2.动态导入的时候直接，引用 const router = createRouter({ history: createWebHistory(), routes: [ // ... { path: 'xxxx', name: 'xxxxx', // 原来的方式，这个在开发中可行，但是生产中不行 // component: () => import(`../views${menu.file}`), // 改成下面这样 component: modules[`../views${filename}`] } // ... ], }) 3-2.异步组件实现 Async Components异步组件测试 import { defineAsyncComponent } from 'vue' const child = defineAsyncComponent(() => import('@/components/async-component-child.vue')) export default { name: 'async-components', components:{ 'child': child } }; 四、总结简单来说，写在路由配置文件中的异步加载就是路由懒加载的用法，而写在组件内部的异步加载就是异步组件用法。 《Vue3学习与实战》系列 Vue3学习与实战 · 组件通信 Vue3学习与实战 · 全局挂载使用Axios Vue3学习与实战 · 配置使用vue-router路由 Vue3学习与实战 · Vuex状态管理 vue3 + vite实现异步组件和路由懒加载（本文） Vite+Vue3+Vant快速构建项目欢迎访问：个人博客地址 |
【本文地址】
今日新闻 |
推荐新闻 |